$(document).ready(function(){					
	var canvas = document.getElementById('canvas');//画布
	var stage = new JTopo.Stage(canvas);//舞台
	var scene = new JTopo.Scene(stage);//场景
	//显示工具栏 showJTopoToobar(stage);
	scene.background = './img/bg.jpg';//场景背景图片
	
	function newNode(x,y,w,h,text){ //新建节点函数
		var node = new JTopo.Node(text);
		node.setBound(x,y,w,h);
		scene.add(node);
		return node;
	}
	
	//简单连线
	function newLink(nodeA, nodeZ, text, dashedPattern){
		var link = new JTopo.Link(nodeA, nodeZ, text);
		link.lineWidth = 2;//线宽
		link.dashedPattern = dashedPattern;// 虚线, 虚段长度
		link.bundleOffset = 60; // 折线拐角处的长度
		link.bundleGap = 20; // 线条之间的间隔
		link.textOffsetY = 3; // 文本偏移量（向下3个像素）
		link.strokeColor = '0,200,255';
		scene.add(link);
		return link;
	}
	
	// 折线
	function newFoldLink(nodeA, nodeZ, text, direction, dashedPattern){
		var link = new JTopo.FoldLink(nodeA, nodeZ, text);
		link.direction = direction || 'horizontal'; //连线方向
		link.arrowsRadius = 15; //箭头大小
		link.lineWidth = 3; // 线宽
		link.bundleOffset = 60; // 折线拐角处的长度
		link.bundleGap = 20; // 线条之间的间隔
		link.textOffsetY = 3; // 文本偏移量（向下3个像素）
		link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
		link.dashedPattern = dashedPattern;
		scene.add(link);
		return link;
	}
	
	// 二次折线
	function newFlexionalLink(nodeA, nodeZ, text, direction, dashedPattern){
		var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
		link.direction = direction || 'horizontal'; //连线方向
		link.arrowsRadius = 10; //箭头大小
		link.lineWidth = 3; // 线宽
		link.offsetGap = 35;//折点距离node 距离
		link.bundleGap = 35; // 线条之间的间隔
		link.textOffsetY = 10; // 文本偏移量
		link.strokeColor = '0,250,0';
		link.dashedPattern = dashedPattern;
		scene.add(link);
		return link;
	}
	
	// 曲线
    function newCurveLink(nodeA, nodeZ, text){
        var link = new JTopo.CurveLink(nodeA, nodeZ, text);
        link.lineWidth = 3; // 线宽
        scene.add(link);
        return link;
    }
	
	var from = newNode(100, 60, 30, 30);
    var to = newNode(300, 60, 30, 30);
    var link = newLink(from, to, 'Arrow', 10);
    link.arrowsRadius = 10;//箭头
    
    var from = newNode(100, 120, 30, 30);
    var to = newNode(300, 120, 30, 30);
    var link = newLink(from, to, 'Link');
    
    
    var from = newNode(100, 200, 30, 30);
    var to = newNode(200, 300, 30, 30);
    var link = newFoldLink(from, to, 'FoldLink');
    var link = newFoldLink(to, from,'FoldLink', 'vertical', 5);
    
    var from = newNode(450, 250, 30, 30);
    var to = newNode(400, 100, 30, 30);
    var link = newFlexionalLink(from, to, 'FlexLink1');
    
    var from = newNode(600, 100, 30, 30);
    var to = newNode(650, 200, 30, 30);
    var link = newFlexionalLink(from, to, 'f', 'vertical', 5);
    
    var from = newNode(450, 400, 30, 30);
    var link = newLink(from, from, 'loop');
    
    var from = newNode(550, 400, 30, 30);
    var to = newNode(650, 300, 30, 30);
    var link = newCurveLink(from, to, 'curve');
	
});
	